<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>

<HEAD>
    <TITLE> New Document </TITLE>
    <html>

    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            p {
                color: red;
            }

            * {
                padding: 0;
                margin: 0;
                border: none;
                outline: none;
                box-sizing: border-box;
            }

            *:before,
            *:after {
                box-sizing: border-box;
            }

            html,
            body {
                min-height: 100%;
            }

            body {
                background: #99FF00 background-image: radial-gradient(mintcream 0%, lightgray 100%);
                ;
            }

            .Container {
                margin: 4% auto;
                width: 210px;
                height: 140px;
                position: relative;
                perspective: 1000px;
            }

            #carousel {
                width: 100%;
                height: 100%;
                position: absolute;
                transform-style: preserve-3d;
                animation: rotation 20s infinite linear;
            }

            #carousel:hover {
                animation-play-state: paused;
            }

            #carousel figure {
                display: block;
                position: absolute;
                width: 220px;
                height: 200px;
                left: 10px;
                top: 10px;
                background: black;
                overflow: hidden;
                border: solid 5px black;
            }

            img {
                filter: grayscale(0);
                cursor: pointer;
                transition: all 0.3s ease 0s;
                width: 100%;
                height: 100%;
            }

            img:hover {
                filter: grayscale(1);
                transform: scale(1.2, 1.2);
            }

            #carousel figure:nth-child(1) {
                transform: rotateY(0deg) translateZ(288px);
            }

            #carousel figure:nth-child(2) {
                transform: rotateY(60deg) translateZ(288px);
            }

            #carousel figure:nth-child(3) {
                transform: rotateY(120deg) translateZ(288px);
            }

            #carousel figure:nth-child(4) {
                transform: rotateY(180deg) translateZ(288px);
            }

            #carousel figure:nth-child(5) {
                transform: rotateY(240deg) translateZ(288px);
            }

            #carousel figure:nth-child(6) {
                transform: rotateY(300deg) translateZ(288px);
            }

            @keyframes rotation {
                from {
                    transform: rotateY(0deg);
                }

                to {
                    transform: rotateY(360deg);
                }
            }
        </style>
        <script>
            window.onload = function () {
                var story = document.getElementById('word');
                var s = document.getElementById('show');
                var i = 0;
                timer = setInterval(function () {
                    s.innerHTML = story.innerHTML.substring(0, i);
                    i++;
                    if (s.innerHTML == story.innerHTML) {
                        clearInterval(timer);
                    }
                }, 200);
            }
        </script>
    </head>

<body>
    <p id="word" style="display:none;"><strong>这是一段文字
            <br>代码使我快乐<br>
            吃饭睡觉敲代码</p>
    <p id="show"></p>
    <div class="Container">
        <div id="carousel">
            <figure><img src="images/1.jpg"></figure>
            <figure><img src="images/2.jpg"></figure>
            <figure><img src="images/3.jpeg"></figure>
            <figure><img src="images/4.jpeg"></figure>
            <figure><img src="images/5.jpeg"></figure>
            <figure><img src="images/6.jpeg"></figure>
        </div>
    </div>
</body>

</html>